<template>
	<view class="content">
		<!-- 用户账号信息 -->
		<view class="account">
			<!-- 			<view class="a_top">
				账号信息
			</view> -->
			<!-- 一个信息栏 -->

			<view class="info_row">
				用户账号：<text style="font-weight: 400;">{{user.account}}</text>
			</view>
			<view class="info_row">
				用户头像：<view class="avatar">
					<image class="avatar_img" :src="user.avatar" mode=""></image>
				</view>
			</view>
			<view class="info_row">
				用户昵称：<text style="font-weight: 400;">{{user.nickName}}</text>
			</view>
			<view class="info_row">
				用户电话：<text style="font-weight: 400;">{{user.mobile}}</text>
			</view>
		</view>
		<!-- 用户基础信息 -->
		<view class="baseInfo">
			<view class="info_row">
				用户姓名：<text style="font-weight: 400;">{{user.userInfo.name}}</text>
			</view>
			<view class="info_row">
				用户年龄：<text style="font-weight: 400;">{{user.userInfo.age}}</text>
			</view>
			<view class="info_row">
				用户性别： <view style="width: 100upx;">

					<u-tag text="男" icon="man" size="mini" v-if="user.userInfo.gender=='男'"></u-tag>
					<u-tag text="女" icon="woman" size="mini" v-if="user.userInfo.gender=='女'" bgColor="#ff6a89"
						borderColor="#ff6a89"></u-tag>

				</view>
			</view>

			<view class="info_row">
				用户身份：<view class="user_role">
					<u-tag v-if="user.roleId==2" text="学生" size="mini" type="success"></u-tag>
					<u-tag v-if="user.roleId==1" text="教师" size="mini" type="warning"></u-tag>
					<u-tag v-if="user.roleId==0" text="管理员" size="mini" type="error"></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			};
		},
		onLoad(options) {
			let user = JSON.parse(decodeURIComponent(options.user))
			this.user = user
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30upx;

		.account {
			width: 100%;
			min-height: 500upx;
			border-radius: 10upx;
			box-shadow: 0 0 10px rgba(0, 0, 0, .15);

			.a_top {
				width: 100%;
				height: 95upx;
				box-sizing: border-box;
				padding: 0 20upx;
				font-size: 34upx;
				font-weight: 700;
				border-bottom: 2upx solid #f1f1f1f1;
				line-height: 95upx;
			}

			.info_row {
				width: 100%;
				min-height: 85upx;

				font-size: 30upx;
				font-weight: 700;
				border-bottom: 2upx solid #f1f1f1f1;

				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 20upx 20upx;

				.avatar {
					width: 130upx;
					height: 130upx;
					border-radius: 10upx;

					.avatar_img {
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}
				}
			}
		}

		.baseInfo {
			width: 100%;
			min-height: 400upx;
			border-radius: 10upx;
			box-shadow: 0 0 10px rgba(0, 0, 0, .15);
			margin-top: 30upx;

			.info_row {
				width: 100%;
				min-height: 85upx;

				font-size: 30upx;
				font-weight: 700;
				border-bottom: 2upx solid #f1f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 20upx 20upx;


			}
		}
	}
</style>